

$(function () {
    $("header").load("./header.html");
    $("footer").load("./footer.html");

    //放大镜

    $('.showimgBox').mouseenter(function(e){
        $('.smallArr').css('display','block');
        $('.bigImgArr').css('display','block');
    });
    $('.showimgBox').mouseleave(function(e){
        $('.smallArr').css('display','none');
        $('.bigImgArr').css('display','none');
    });
    //计算出小区域的大小
    $height=$(".showimgBox").height()/$(".bigImg").height()*$(".bigImgArr").height();
    $width=$(".showimgBox").width()/$(".bigImg").width()*$(".bigImgArr").width();

    $(".smallArr").css({height:$height,width:$width});
    
    $(".smallArr").on("mousemove",function (e) {
        var e
        var $left=e.pageX-$(".smallArr").width()/2-$(".showimgBox").offset().left;
        var $top=e.pageY-$(".smallArr").height()/2-$(".showimgBox").offset().top;
        if($left<=0){
            $left=0
        }else if($left>=$(".showimgBox").width()-$(".smallArr").width()){
            $left=$(".showimgBox").width()-$(".smallArr").width()
        }
        if($top<=0){
            $top=0;
        }else if($top>=$(".showimgBox").height()-$(".smallArr").height()){
            $top=$(".showimgBox").height()-$(".smallArr").height();
        }
        $(".smallArr").css({"left":$left,"top":$top})
        $(".bigImg").css({
            left:-$left*2.5,
            top:-$top*2.5
        })
    })
    $(".smallImg li").on("mouseenter",function () {
        $(".middleImg")[0].src=`./images/fangimg/big${$(this).index()+1}.jpg`;
        $(".bigImg")[0].src=`./images/fangimg/big${$(this).index()+1}.jpg`;
        $(this).addClass("active1").siblings().removeClass("active1");
    })



});